<template>
  <!-- 门店信息 -->
  <view class="md-info">
    <view class="md-name">
      <i class="iconfont icon-store"></i>
      <text>{{ order.md_info.name }}</text>
    </view>
    <view class="md-address-box">
      <view class="address-text">{{ order.md_info.address }}</view>
      <view class="md-opreate-icons">
        <view class="icon-box" @click="guideToShop">
          <i class="iconfont icon-map-filling1"></i>
        </view>
        <view class="icon-box" @click="phoneToShop(order.md_info.mobile)">
          <i class="iconfont icon-phone"></i>
        </view>
      </view>
    </view>
    <view class="md-distance">
      <text> {{$t('order.distance')}} </text>
      <text>{{ order.md_info.distance }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  props: {
    order: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  filters: {},
  computed: {},
  methods: {
    // 拨打商家电话
    phoneToShop(num) {
      this.$utils.makePhoneCall(num);
    },
    // 导航到店
    guideToShop() {
      uni.openLocation({
        latitude: parseFloat(this.order.md_info.latitude),
        longitude: parseFloat(this.order.md_info.longitude),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.md-info {
  width: 100%;
  padding: 30rpx 30rpx 30rpx 24rpx;
  background-color: #ffffff;
  margin-bottom: 24rpx;
  .md-name {
    display: flex;
    align-items: center;
    .iconfont {
      color: #000000;
      font-size: 42rpx;
      font-weight: 600;
      margin-right: 12rpx;
    }
    text {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 600;
      color: #262626;
    }
  }
  .md-address-box {
    margin-top: 16rpx;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    .address-text {
      flex: 1;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8c8c8c;
    }
    .md-opreate-icons {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .icon-box {
        width: 48rpx;
        height: 48rpx;
        background: #fbeceb;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont {
          color: #f0250e;
        }
      }
      .icon-box:last-child {
        margin-left: 20rpx;
      }
    }
  }
  .md-distance {
    line-height: 1;
    text {
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #f0250e;
    }
    text:nth-child(1) {
      color: #8c8c8c;
    }
  }
}
</style>
